<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/admin/attribute/list">属性管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>添加属性</el-breadcrumb-item>
    </el-breadcrumb>

    <h3 style="margin: 20px 0;">添加属性</h3>

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
      <el-form-item label="属性模板" prop="templateId">
        <el-input v-model="ruleForm.templateId"></el-input>
      </el-form-item>
      <el-form-item label="属性名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="简介" prop="description">
        <el-input v-model="ruleForm.description"></el-input>
      </el-form-item>
      <el-form-item label="属性类型" prop="type">
        <el-radio-group v-model="ruleForm.type">
          <el-radio :label="0">销售属性</el-radio>
          <el-radio :label="1">非销售属性</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="输入类型" prop="inputType">
        <el-radio-group v-model="ruleForm.inputType">
          <el-radio :label="0">手动录入</el-radio>
          <el-radio :label="1">单选</el-radio>
          <el-radio :label="2">多选</el-radio>
          <el-radio :label="3">单选（下拉列表）</el-radio>
          <el-radio :label="4">多选（下拉列表）</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备选值列表" prop="valueList">
        <el-input v-model="ruleForm.valueList"></el-input>
      </el-form-item>
      <el-form-item label="计量单位" prop="unit">
        <el-input v-model="ruleForm.unit"></el-input>
      </el-form-item>
      <el-form-item label="自定义排序序号" prop="sort">
        <el-input v-model="ruleForm.sort"></el-input>
      </el-form-item>
      <el-form-item label="是否允许自定义" prop="isAllowCustomize">
        <el-switch
                v-model="ruleForm.isAllowCustomize"
                active-value="1"
                inactive-value="0"
                active-color="#13ce66"
                inactive-color="#999">
        </el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        typeText: ['销售属性', '非销售属性'],
        inputTypeText: ['手动录入', '单选', '多选', '单选（下拉列表）', '多选（下拉列表）'],
        ruleForm: {
          templateId: '',
          name: '',
          description: '',
          type: 0,
          inputType: 0,
          valueList: '',
          unit: '',
          sort: '',
          isAllowCustomize: 0
        },
        rules: {
          name: [
            {required: true, message: '请输入属性名称', trigger: 'blur'},
            {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let url = 'http://localhost:9080/attributes/add-new';
            console.log('url >>> ' + url);
            console.log('data >>> ');
            console.log(this.ruleForm);
            this.axios
                    .create({headers: {'Authorization': localStorage.getItem('jwt')}})
                    .post(url, this.ruleForm).then((response) => {
              console.log(response.data);
              if (response.data.code == 20000) {
                this.$message({
                  message: '添加属性成功！',
                  type: 'success'
                });
                this.resetForm(formName);
              } else {
                this.$message.error(response.data.message);
              }
            }).catch(function (error) {
              console.log('响应结果为失败！');
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>

</style>